/*
  学习目标：生命周期的更新阶段
  钩子函数： 
  💥注意：
      1. 不论DOM中有没有使用数据，钩子函数都会被触发。（与vue不同）
      2. react中的更新，指的是数据更新，而非视图更新。（与vue不同）
*/
import React, { Component } from 'react';

export default class App extends Component {
  state = {
    title: 'Hello 666',
  };
  render() {
    const { title } = this.state;
    return (
      <h1>
        我是App
        <button onClick={() => this.setState({ title: '888' })}>父组件按钮</button>
        <Child title={title}></Child>
      </h1>
    );
  }
}

class Child extends React.Component {
  // 1. state改变会触发更新更新阶段的两个钩子函数
  // 2. props 的值改变会触发更新阶段的两个钩子函数
  state = {
    msg: '123',
  };

  render() {
    const { msg } = this.state;

    return (
      <div>
        我是子组件
        <hr />
        <button onClick={() => this.setState({ msg: msg + '~' })}>点我改变msg</button>
      </div>
    );
  }

  componentDidUpdate() {
    const { msg } = this.state;
    // console.log('componentDidUpdate被执行');
    console.log('msg  ----->  ', msg);
  }
}
